<template>
  <div class="wrap">
    <div class="table-main">
      <el-button type="primary" size="mini" @click="clearFilter" icon="el-icon-delete">清除所有过滤器</el-button>
      <el-button type="primary" size="mini" @click="newEmployee" icon="el-icon-circle-plus-outline">新增员工
      </el-button>

      <el-table
          style="margin-top: 20px"
          size="small"
          ref="filterTable"
          :data="tableData"
          border :cell-style="rowStyle">
        <el-table-column
            prop="name"
            label="教练名称"
            sortable
            width="160"
            header-align="center">
        </el-table-column>
        <el-table-column
            prop="type"
            label="员工类别"
            width="160"
            :filters="[{ text: '前台', value: '前台' }, { text: '教练', value: '教练' }, { text: '检修员', value: '检修员' },{ text: '保洁', value: '保洁' }]"
            :filter-method="memberTag" header-align="center">
          <template slot-scope="scope">
            <el-tag
                :type="employeeType(scope.row.type)"
                disable-transitions>{{ scope.row.type }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="memberMoney"
            label="会员绩效(元)"
            width="100" header-align="center">
        </el-table-column>
        <el-table-column
            prop="courseMoney"
            label="课程绩效(元)"
            width="100" header-align="center">
        </el-table-column>
        <el-table-column
            prop="jx"
            label="本月绩效(元)"
            width="100" header-align="center">
        </el-table-column>
        <el-table-column
            prop="phone"
            label="手机号"
            width="160" header-align="center">
        </el-table-column>
        <el-table-column
            label="操作"
            width="300" header-align="center">
          <template slot-scope="scope">
            <div style="display: flex;justify-content: space-around;align-items: center">
              <el-button size="mini" @click="goUpdate(scope.row)">
                修改信息
              </el-button>
              <el-button disabled size="mini" v-show="scope.row.clockIn===0"
                         @click="signIn(scope.row.employeeId)">
                今日未签到
              </el-button>
              <el-button style="margin-left: 10px" size="mini" type="info"
                         v-show="scope.row.clockIn===1" disabled>今日已签到
              </el-button>
              <el-button :style="scope.row.clockIn===1?'margin-right:5px':''" size="mini" type="danger"
                         @click="dismissByPhone(scope.row.phone)">解雇
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="block">
      <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page.sync="current"
          :page-size="10"
          layout="prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
    <NewEmployee :saveNewEmployeeShow="saveNewEmployeeShow" @cancel="saveNewEmployeeShow=false"/>
    <EmployeeUpdate :updateEmployeeForm="updateEmployeeForm" :updateShow="updateShow"
                    @cancel="updateShow=false"></EmployeeUpdate>
  </div>
</template>

<script>
import NewEmployee from "@/components/employee/NewEmployee";
import filter from "@/utils/filter";
import {attend, dismissEmployeeByPhone, getTodayAttend, createTodayAttend, getCoachByPage} from "@/utils/apis/employee";
import EmployeeUpdate from "@/components/employee/EmployeeUpdate";

export default {
  name: "CoachList",
  components: {
    EmployeeUpdate,
    NewEmployee
  },
  data() {
    return {
      current: 1,
      total: 0,
      selectPhone: '',
      tableData: [],
      saveNewEmployeeShow: false,
      updateShow: false,
      updateEmployeeForm: {}
    }
  },
  created() {
    // this.handleCurrentChange(1)
    this.createTodayAttend()

  },
  computed: {
    employeeType() {
      return function (val) {
        if (val === '前台')
          return 'success'
        if (val === '教练')
          return 'waring'
        else
          return 'info'
      }
    }
  },
  methods: {
    //更新表格数据
    updateFormData(val) {
      const data = val.data.data
      this.total = data.total
      this.tableData = data.records
    },
    handleCurrentChange(val) {
      const loading = this.$loading({
        lock: true,
        text: '更新数据.......',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.current = val
      // getTodayAttend(this.current, 10).then(res => {
      //   this.updateFormData(res)
      //   loading.close()
      // })
      getCoachByPage(this.current, 10).then(res => {
        console.log(res)
        this.updateFormData(res)
        loading.close()
      })
    },
    clearFilter() {
      this.$refs.filterTable.clearFilter();
      this.handleCurrentChange(1)
      this.selectPhone = ''
    },
    //是否会员的标签
    memberTag(value, row) {
      return row.type === value
    },
    filterTag(value, row) {
      return row.tag === value;
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },
    //根据id解雇员工
    dismissByPhone(phone) {
      this.$confirm('此操作将删除该员工,请谨慎操作,是否确认?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        dismissEmployeeByPhone(phone).then(res => {
          console.log(res)
          if (res.data.code === 200) {
            this.$message.success('删除成功!')
            this.handleCurrentChange(1)
          } else {
            this.$message.error(res.data.data)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消删除'
        });
      })
    },
    //新建员工
    newEmployee() {
      this.saveNewEmployeeShow = true
    },
    //表格文字居中
    rowStyle() {
      return "text-align:center";
    },
    //员工签到
    signIn(id) {
      const date = new Date()
      console.log()
      let present = {
        employeeId: id,
        date: filter.formatDate(date, 'yyyy-M-d')
      }
      attend(present).then(res => {
        // console.log(res.data)
        if (res.data.code === 200) {
          this.$message.success('签到成功')
          this.handleCurrentChange(this.current)
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    //创建今日考勤表
    createTodayAttend() {
      createTodayAttend().then(res => {
        if (res.data.code === 200) {
          this.handleCurrentChange(1)
        }
      })
    },
    goCheckAttend() {
      this.$router.push('/faceCheck')
    },
    //打开修改页
    goUpdate(employee) {
      this.updateEmployeeForm = employee
      this.updateShow = true
    },

  }
}
</script>

<style scoped>

.wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.table-main {
  width: 781px;
}

.block {
  padding-top: 50px;
  margin-right: 70px;
}

</style>